<template>
  <div class="index_root">
    <router-view />
    <div class="index_footer"></div>
    <van-tabbar v-model="active" @change="onTabbarChange">
      <van-tabbar-item
        v-for="(item, index) in navBarList"
        :key="index"
        :to="item.path"
      >
        <!-- <span>自定义</span> -->
        <template #icon="props">
          <img :src="!props.active ? item.icon : item.icon_checked" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import router from '@/router';
export default {
  name: "homeIndex",
  data() {
    return {
      active: 0,
      navBarList: [
        {
          path: "/homePage",
          icon: require("@/image/navBar/home.png"),
          icon_checked: require("@/image/navBar/home_check.png"),
        },
        {
          path: "/aiQuantization",
          icon: require("@/image/navBar/ai.png"),
          icon_checked: require("@/image/navBar/ai_check.png"),
        },
        {
          path: "/chatTools",
          icon: require("@/image/navBar/message.png"),
          icon_checked: require("@/image/navBar/message_check.png"),
        },
        {
          path: "/personalCenter",
          icon: require("@/image/navBar/personage.png"),
          icon_checked: require("@/image/navBar/personage_check.png"),
        },
      ],
    };
  },
  watch: {
    $route(to) {
      // 监听路由变化，设置active
      this.setActiveByRoute(to.name);
    }
  },
	mounted(){
    this.setActiveByRoute(this.$route.name);
	},
	methods:{
    setActiveByRoute(routeName) {
      const routeIndexMap = {
        'HomePage': 0,
        'AiQuantization': 1,
        'ChatTools': 2,
        'PersonalCenter': 3
      };
      if (routeIndexMap[routeName] !== undefined) {
        this.active = routeIndexMap[routeName];
      }
    },

		onTabbarChange(index){
			this.active = index;
		}
	}
};
</script>

<style lang="less">
.index_root {
  width: 100vw;
  min-height: 100vh;
}
.index_footer {
  width: 100%;
  height: 50px;
}
</style>